<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/ico" href="/images/logo.png"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/all.css">
    <link rel="stylesheet" href="/css/styles.css" type="text/css"/>
    <link rel="stylesheet" href="/css/editormd.css"/>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" th:href="@{/css/bly-icon.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/common.css}" media="all">
    <title th:text="${titleName}"></title>
</head>
<body>
<input type="hidden" id="articleId" th:value="${articleId}"/>
<div class="container-fluid" id="header">
    <div th:replace="user/common::frontheaderhtml"></div>

    <!-- 主题展示区 -->
    <div class="container" id="hero">
        <div class="row justify-content-end">
            <div class="col-lg-6 hero-img-container">
                <div class="hero-img">
                    <!-- hero img -->
                    <img id="imgUrl" src="">
                </div>
            </div>

            <div class="col-lg-9">
                <div class="hero-title">
                    <h1 id="title"></h1>
                </div>

            </div>
            <!-- 作者 -->
            <div class="col-lg-6">
                <div class="hero-meta">
                    <div class="author">
                        <div class="author-img"><img src=""></div>
                        <div class="author-meta">
                            <span class="author-name"></span>
                            <!--<span class="author-tag">Travel Blogger</span>-->
                        </div>
                    </div>
                    <span class="date mt-2" id="crateTime"></span>
                    <div class="tags mt-2" id="tags">
                        <a href="javascript:void(0);"><span class="badge badge-pill p-2 badge-light">#标签</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 内容区 -->
<div class="container mt-5" id="content">
    <!-- 外部链接 -->
    <div class="col-lg-1 text-left mb-3 fixed" style="float: left;" id="social-share">
        <a class="btn  btn-light m-2 button-method" data-method="qqShare" href="javascript:;"><i class="fab fa-qq"></i></a>
        <a class="btn  btn-light m-2" href="#"><!--<i class="fab fa-google"></i>--></a>
        <!--<a class="btn  btn-light m-2" href="#"><i class="fab fa-twitter"></i></a>-->
    </div>
    <div class="row justify-content-center">
        <!-- 文章内容 -->
        <div class="col-xl-7 col-lg-10 col-md-12" id="articleContent">
        </div>

        <!-- 互动区-->
        <div class="col-md-12 my-gongjulan">
            <ul class="layui-nav my-nav">
                <li class="layui-nav-item button-method" data-method="zan"><i class="iconfont icon-zan"></i> 点赞</li>
                <li class="layui-nav-item button-method" data-method="pinglun"><i class="iconfont icon-pinglun1"></i> 评论
                </li>
                <li class="layui-nav-item button-method" data-method="fenxiang"><i class="iconfont icon-yinyong"></i> 分享
                </li>
            </ul>
        </div>
        <!-- 发表评论 -->
        <div class="col-md-12 layui-form-item" id="pinglun"
             style="padding: 15px;margin-top: 10px;background-color: #fff">
            <input type="hidden" id="replyId" value=""/>
            <input type="hidden" id="replyName" value=""/>
            <div class="layui-inline">
                <input type="text" class="layui-input" placeholder="*昵称" id="discussName"
                       style="width: 250px;margin-bottom: 10px;"/>
            </div>
            <div class="layui-inline">
                <input type="text" class="layui-input" placeholder="*邮箱，通知回复消息用" id="email"
                       style="width: 250px;margin-bottom: 10px;"/>
            </div>
            <!--todo 实现根据用户选择发送回复邮件-->
            <div class="layui-inline">
                <span style="color:#C9C9C9;">邮件通知：</span>
                <div class="layui-unselect layui-form-switch" style="margin-top: 0px;" lay-skin="_switch" data-value="0"><i style="top:2px;"></i><em>OFF</em></div>
            </div>

            <textarea placeholder="输入你的评论" class="layui-textarea" id="discussContent"
                      style="margin-bottom: 10px;"></textarea>

            <input type="button" class="layui-btn layui-btn-primary button-method" data-method="fabiao" value="发表评论">
            <input type="button" class="layui-btn layui-btn-danger button-method layui-hide" data-method="cancel"
                   value="取消回复" id="cancel">
            <span class="bly-remind">请勿发表任何关于违法、违规的言论。</span>
        </div>
        <!-- 评论区 -->
        <div class="col-md-12 bl-pinglun">

        </div>
        <div class="col-lg-10 mt-3">
            <hr>
        </div>
    </div>
</div>


<!-- 推荐区 -->
<div class="container mt-3 mb-5" id="article-grid">
    <div class="row justify-content-center" id="recommend">
    </div>
</div>

<!-- Footer section  -->
<footer th:replace="user/common::frontfooterhtml"></footer>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/editormd.js"></script>
<script src="/lib/flowchart.min.js"></script>
<script src="/lib/jquery.flowchart.min.js"></script>
<script src="/lib/marked.min.js"></script>
<script src="/lib/prettify.min.js"></script>
<script src="/lib/raphael.min.js"></script>
<script src="/lib/sequence-diagram.min.js"></script>
<script src="/lib/underscore.min.js"></script>
<script src="/layui/layui.js"></script>
<!--<script src="/js/layer.js"></script>-->
<script>
    layui.config({
        base: '/layui/lay/modules/'
    }).use(['element', 'form'], function () {
        var element = layui.element,
            form = layui.form;
        var articleId = $("#articleId").val();
        var qqUrl='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://boyjfj.top/blog/single/'+articleId+'&title={{title}}&desc={{desc}}&summary={{summary}}&site={{100*100}}&pics={{img}}'

        layer.load();

        $('.layui-unselect').click(function () {
            if($(this).hasClass("layui-form-onswitch")){
                $(this).removeClass('layui-form-onswitch');
                $(this).find("em").text("OFF");
                $(this).attr("data-value","0");
            }else {
                var $this=this;
                layer.alert("<span style='color: #ff4123'>注意：</span><br/>开启后如有人回复你，会以邮件提醒你。<br/><span style='color: #ff673e'>请确保你的邮箱正确无误！</span>", {
                    time: 0 //不自动关闭
                    , btn: ['确定', '取消']
                    , yes: function (index) {
                        $($this).addClass('layui-form-onswitch');
                        $($this).find("em").text("ON");
                        $($this).attr("data-value", "1");
                        layer.close(index);
                    }
                });
            }
        });

        init();
        function init() {
            $.ajax({
                url: "/article/getByInfo",
                type: 'post',
                dataType: 'json',
                data: {
                    articleId: articleId
                },
                success: function (res) {
                    if (res.status != 200) {
                        layer.alert(res.msg, {icon: 5});
                        return;
                    }

                    /***展示文章内容***/
                    var data = res.data.articleUser;
                    $("#imgUrl").attr("src", data.a_imgUrl);
                    $("#title").text(data.title);
                    $(".author-img img").attr("src", data.imgUrl);
                    $(".author-name").text(data.nickName);
                    $("#crateTime").text(data.a_createTime);
                    qqUrl=qqUrl.replace('{{title}}',data.title);
                    qqUrl=qqUrl.replace('{{desc}}',data.title);
                    qqUrl=qqUrl.replace('{{summary}}',data.title);
                    qqUrl=qqUrl.replace('{{img}}','http://boyjfj.top/'+data.imgUrl);
                    if (data.tags) {
                        var list = data.tags.split(",");
                        var html = '';
                        $.each(list, function (i, item) {
                            html += '<a href="javascript:void(0);"><span class="badge badge-pill p-2 badge-light">#' + item + '</span></a>';
                        });
                        $('#tags').html(html);
                    }
                    // $("#articleContent").html(data.content);
                    editormd.markdownToHTML("articleContent", {
                        markdown: data.original,
                        htmlDecode: "style,script,iframe|on*",
                        tocm: true,
                        tex: true,
                        flowChart: true,
                        sequenceDiagram: true,
                        emoji: true,
                        taskList: true,
                    });
                    /** 加载评论 **/
                    var pinglun = "";
                    if (res.data.discusses) {
                        $.each(res.data.discusses, function (i, item) {
                            pinglun += '<div class="pb-pinglun">' +
                                '    <div class="p-header">' +
                                '        <img src="/images/discuss.png">' +
                                '        <span class="name">' + item.discussName + '</span>' +
                                '    </div>' +
                                '    <div class="p-body">';
                            if (item.replyName) {
                                pinglun += '<span class="reply">@' + item.replyName + '</span>';
                            }
                            pinglun += '<span class="content">' + item.content + '</span>' +
                                '    </div>' +
                                '    <div class="p-footer">' +
                                '        <span>' + item.discussTime + '</span>' +
                                '        <span class="zan button-method" data-method="discuss" data-id="' + item.id + '"><i class="iconfont icon-zan"></i> ' + (item.praiseNum || '') + '</span>' +
                                '        <span class="zan button-method" data-method="reply" data-id="' + item.id + '" data-name="' + item.discussName + '"><a href="#pinglun">回复</a></span>' +
                                '    </div>' +
                                '</div>';
                            if (res.data.discusses.length > 1 && i !== (res.data.discusses.length - 1)) {
                                pinglun += '<hr>';
                            }
                        });
                    }
                    $(".bl-pinglun").html(pinglun);

                    /***随机推荐内容***/
                    var recommend = "";
                    if (res.data.other) {
                        $.each(res.data.other, function (i, item) {
                            recommend += ' <div class="col-xl-6 col-lg-12 center-text">' +
                                '    <a href="/blog/single/' + item.aid + '">' +
                                '        <div class="article-card">' +
                                '            <div class="article-img">' +
                                '                <img src="' + item.a_imgUrl + '">' +
                                '            </div>' +
                                '            <div class="article-meta text-left">' +
                                '                <h2>' + item.title + '</h2>' +
                                '                <p>' + (item.describe || "") + '</p>' +
                                '                <div class="bly-list-info"> <span><i class="iconfont icon-liulanyanjing" title="浏览"></i> ' + (item.browseNum || '') + '</span>' +
                                '                <span><i class="iconfont icon-zan" title="赞"></i> ' + (item.praiseNum || '') + ' </span></div>' +
                                '            </div>' +
                                '        </div>' +
                                '    </a>' +
                                '</div>';
                        })
                    }
                    $("#recommend").html(recommend);

                    /***在页面停留10后认定为一次浏览***/
                    setTimeout(function () {
                        $.ajax({
                            url: '/article/browse',
                            type: 'post',
                            dataType: 'json',
                            data: {
                                articleId: articleId
                            },
                            success: function (res) {

                            }
                        })
                    }, 10000);

                    onevent();
                    layer.closeAll('loading');
                }
            })
        }

        var active = {
            zan: function () {
                $.ajax({
                    url: '/article/praise',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        articleId: articleId
                    },
                    success: function (res) {
                        layer.msg("点赞成功");
                    }
                });
            },
            discuss: function () {
                var discussId = $(this).data('id');
                $.ajax({
                    url: '/discuss/praise',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        discussId: discussId
                    },
                    success: function (res) {
                        layer.msg("点赞成功");
                    }
                });
            },
            pinglun: function () {
                $("#pinglun").removeClass("layui-hide");
            },
            qqShare: function () {
                window.open(qqUrl,"_blank");
            },
            fabiao: function () {
                var name = $("#discussName").val();
                var email = $("#email").val();
                var content = $("#discussContent").val();
                var replyId = $("#replyId").val();
                var replyName = $("#replyName").val();
                var notice = $(".layui-unselect").data("value");
                if (name == null) {
                    layer.alert("昵称不能为空！", {icon: 7});
                    return;
                }
                if (email == null) {
                    layer.alert("邮箱不能为空，以便回复通知你。", {icon: 7});
                    return;
                }
                var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                if (!reg.test(email)) {
                    layer.alert("邮箱格式不对！", {icon: 7});
                    return;
                }
                if (content == null || content.length <= 5) {
                    layer.alert("评论内容不小于5个字");
                    return;
                }

                $.ajax({
                    url: '/discuss/save',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        articleId: articleId,
                        discussName: name,
                        content: content,
                        email: email,
                        replyId: replyId,
                        noticeSwitch: notice
                    },
                    success: function (res) {
                        if (res.status != 200) {
                            layer.alert(res.msg, {icon: 5});
                            return;
                        }
                        layer.msg("评论成功");

                        var pinglun = '<div class="pb-pinglun">' +
                            '    <div class="p-header">' +
                            '        <img src="/images/discuss.png">' +
                            '        <span class="name">' + name + '</span>' +
                            '    </div>' +
                            '    <div class="p-body">';
                        if (replyName) {
                            pinglun += '<span class="reply">@' + replyName + '</span>';
                        }
                        pinglun += '<span class="content">' + content + '</span>' +
                            '    </div>' +
                            '    <div class="p-footer">' +
                            '        <span>' + dateTime() + '</span>' +
                            '    </div>' +
                            '</div>';
                        var html = $(".bl-pinglun").html();
                        if (html) {
                            pinglun += '<hr/>' + html;
                        }
                        $(".bl-pinglun").html(pinglun);
                    }
                });
            },
            reply: function () {
                $('#cancel').removeClass('layui-hide');
                var id = $(this).data('id');
                var name = $(this).data('name');
                $('#replyId').val(id);
                $('#replyName').val(name);
                $('#discussContent').attr('placeholder', '回复：' + name);
            },
            cancel: function () {
                $('#replyId').val('');
                $('#replyName').val('');
                $('#discussContent').attr('placeholder', '输入你的评论');
                $('#cancel').addClass('layui-hide');
            }

        };

        function onevent() {
            $('.button-method').on('click', function () {
                var method = $(this).data('method');
                active[method] ? active[method].call(this) : '';
            });
        }

        function dateTime() {
            var d = new Date();
            var vYear = d.getFullYear();
            var vMon = d.getMonth() + 1;
            var vDay = d.getDate();
            var h = d.getHours();
            var m = d.getMinutes();
            var se = d.getSeconds();
            var s = vYear + "-" + (vMon < 10 ? "0" + vMon : vMon) + "-" + (vDay < 10 ? "0" + vDay : vDay) + " " + (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (se < 10 ? "0" + se : se);
            return s;
        }
    });
</script>
</body>
</html>